<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>插件市场 – 基于Ruoyi-Plus后台开发框架</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="author" content="Ruoyi-Plus">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/front/H-ui/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/front/H-ui/lib/respond.min.js"></script>
    <link href="/front/H-ui/static/h-ui/css/H-ui.ie.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/front/H-ui/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/front/H-ui/static/h-ui/css/H-ui.doc.css"/>
    <link rel="stylesheet" th:href="@{/ajax/libs/swiper/css/swiper.css}"/>
    <link rel="stylesheet" type="text/css" href="/front/H-ui/lib/Hui-iconfont/1.0.8/iconfont.min.css"/>
    <link th:href="@{/ajax/libs/toastr/toastr.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>

</head>
<body class=" ">

<div th:replace="front/header"></div>


<main class="content">
    <style>
        .wait {
            border: 1px solid #d2d6de;
            padding: 0px 16px;
            font-size: 15px;
            color: #999;
            height: 44px;
        }

        main.content {
            margin: 0;
            padding: 0;
            min-height: calc(100vh - 355px);
        }
        #content-container {
            min-height: 250px;
            padding: 15px;
            margin-right: auto;
            margin-left: auto;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 30px;
        }


        @media (min-width: 1200px){
            #content-container {
                width: 1170px;
            }
        }

        @media (min-width: 992px){
            #content-container {
                width: 970px;
            }
        }

        @media (min-width: 768px){
            #content-container {
                width: 750px;
            }
        }

        #content-container {
            margin-right: auto;
            margin-left: auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        .login-section {
            margin: 110px auto;
            width: 460px;
            -webkit-border-radius: 0;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 0;
            -moz-background-clip: padding;
            border-radius: 0;
            background-clip: padding-box;
        }
        .user-section {
            background: #fff;
            padding: 15px;
            margin-bottom: 20px;
            -webkit-border-radius: 4px;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 4px;
            -moz-background-clip: padding;
            border-radius: 4px;
            background-clip: padding-box;
            -webkit-box-shadow: 0 26px 50px -20px rgba(0,36,100,0.3);
            -moz-box-shadow: 0 26px 50px -20px rgba(0,36,100,0.3);
            box-shadow: 0 26px 50px -20px rgba(0,36,100,0.3);
        }
        .login-section .logon-tab {
            margin: -15px -15px 0 -15px;
        }
        .login-section .logon-tab > a.active {
            background-color: #fff;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        .login-section .logon-tab > a {
            display: block;
            padding: 20px 0px;
            float: left;
            width: 50%;
            font-size: 16px;
            text-align: center;
            color: #616161;
            background-color: #fafafa;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
        }
        .login-section .login-main {
            padding: 12px 30px 20px 30px;
        }
        a:hover, a:focus {
            text-decoration: none;
        }
        #code-error{
            margin-right: 97px;
        }
        a.btn-primary{
            color: #fff;
            background-color:#2c3e50;
            border-color: #2c3e50;
        }
        a.btn-primary:hover {
            color: #fff;
            background-color: #1a242f;
            border-color: #161f29;
        }
    </style>
    <div id="content-container" >
        <div class="user-section login-section">
            <div class="logon-tab clearfix">
                <a class="active">重 置</a>
                <a href="/login">登 录</a>
            </div>
            <div class="login-main">
                <form  class="form form-horizontal responsive" id="reset_form"  >

                    <div class="row clearfix">
                        <label class="form-label col-xs-3">邮箱：</label>
                        <div class="formControls col-xs-8">
                            <input type="text" class="input-text" name="email" id="email">
                        </div>
                    </div>



                    <div class="row clearfix">
                        <label class="form-label col-xs-3">验证码：</label>
                        <div class="formControls col-xs-8">

                            <input class="input-text" type="text" name="code" id="code" style="width: calc(100% - 95px);float:left;">
                            <a onclick="sendResetCode()" style="width:95px;display: inline-block;float:left;" id="codeBtn" class="btn btn-secondary">发送验证码</a>

                        </div>
                    </div>

                    <div class="row clearfix">
                        <label class="form-label col-xs-3">密码：</label>
                        <div class="formControls col-xs-8">
                            <input type="password"  class="input-text" autocomplete="off" name="password" id="password">
                        </div>
                    </div>

                    <div class="row clearfix ">
                        <div class="formControls col-xs-8 col-xs-offset-3">
                            <a onclick="submit()" id="registBtn"  class="btn btn-primary btn-md btn-block">提 交</a>
                        </div>
                    </div>

                </form>

            </div>
        </div>
    </div>
</main>


<div th:replace="front/footer"></div>

<script type="text/javascript" src="/front/H-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/front/H-ui/lib/jquery-ui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/front/H-ui/static/h-ui/js/H-ui.js"></script>

<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.1.0}"></script>
<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.1.0}"></script>

<!--<script th:src="@{/ruoyi/js/fast.js}"></script>-->

<script th:inline="javascript">
    var ctx = [[@{/}]];

        $(function(){

            $("#reset_form").validate({
                focusCleanup: true,
                rules: {
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true
                    },
                    code: {
                        required: true
                    }
                },
                messages: {
                    email: {
                        required: "请输入邮箱",
                    },
                    password: {
                        required: "请输入密码",
                    },
                    code: {
                        required: "请输入验证码",
                    }
                }
            })

        })

        jQuery.validator.addMethod("telephone", function(value, element) {
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (mobile.test(value));
        }, "手机号格式不正确");
        jQuery.validator.addMethod("email", function(value, element) {
            var email =/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            return this.optional(element) || (email.test(value));
        }, "邮箱格式不正确");

        function submit(){
            if ($.validate.form()) {
                var email=$("#email").val();
                var username=$("#username").val();
                var password=$("#password").val();
                var code=$("#code").val();
                $.ajax({
                    type: "post",
                    url:ctx+"plugStore/resetpwd",
                    dataType: "json",
                    data:{email:email,username:username,password:password,code:code},
                    beforeSend:function(){
                        $.modal.loading("正在处理，请稍后...");
                        //$("#registBtn").removeAttr("onclick");
                    },
                    success:function(json){
                        $.modal.closeLoading();
                        //$("#registBtn").attr("onclick","regist()");
                        layer.msg(json.msg);
                        if(json.code==0||json.code=='0'){
                            $("#reset_form")[0].reset();
                        }
                    }
                });

            }
        }

        //发送邮箱验证码
        function sendResetCode(){
            var emailReg =/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            var email=$("#email").val();
            if($.common.isEmpty(email)){
                layer.msg("请输入邮箱!");return;
            }
            if(!emailReg.test(email)){
                layer.msg("请输入有效的邮箱!");return;
            }
            var url=ctx+"plugStore/sendResetEmailCode";

            $.ajax({
                type: "post",
                url:url,
                dataType: "json",
                data:{email:email},
                beforeSend:function(){
                    $.modal.loading("正在处理，请稍后...");
                    $("#codeBtn").removeAttr("onclick");
                },
                success:function(json){
                    $.modal.closeLoading();
                    layer.msg(json.msg);
                    if(json.code==0||json.code=='0'){
                        $("#codeBtn").html("<strong>60</strong>秒");
                        $("#codeBtn").removeClass("btn-secondary").addClass("btn-default");
                        window.setTimeout("tick()",1000);
                    }
                }
            });
        }

        function tick()
        {
            var time = $("#codeBtn strong").html();
            time=Number(time);
            if(time>0)
            {    time=time-1;
                $("#codeBtn").html("<strong>"+time+"</strong>秒");
                window.setTimeout("tick()",1000);
            }
            else
            {
                $("#codeBtn").html("发送验证码");
                $("#codeBtn").attr("onclick","sendCode()");
                $("#codeBtn").addClass("btn-secondary");
            }
        }

</script>
<script>
    /*加载底部前执行。ps：防止闪现
     控制当页面内容过少时，底部仍在屏幕最下方
     主体内容最小高度
     */
    var topHeight = 46;//头部高度

    var footerHeight = 171;//底部高度
    var contentMinHeight = $(window).height() - topHeight - footerHeight;
    $("#content-container").css("min-height", contentMinHeight)
    $(window).resize(function () {
        var contentMinHeight = $(window).height() - topHeight - footerHeight;
        $("#content-container").css("min-height", contentMinHeight)
    })
</script>
</body>

</html>